<html>
<head>
<style>
@page {
 size: 80px 60px;
 margin: 10px;
}
body {
  margin: 0;
  max-width: 60px;
}
div {
  box-sizing: border-box;
}
</style>
</head>
<body style="font-family: 'TestFont'; color: black; font-size: 12px;">
<!-- The inner blue box should not overflow the red box to left or right. -->
<div style="background-color: red; position: static; width: 50%; height: 20px; overflow: hidden;left: 10px;">
  <div style="background-color: blue; display: inline-block; width: 150%; height: 70%; margin-top: 3px; margin-left: -10%;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
</body>
</html>
